﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="layui/css/layui.css" rel="stylesheet" />
    <style>
        .layui-table-tool-temp {
            text-align: left;
        }

        .layui-table-page {
            text-align: center;
        }

        .layui-table-tool-panel {
            top: 0;
            left: 130px;
        }
    </style>
</head>
<body>
    <center>
        <!--条件表单-->
        <div class="layui-form" lay-filter="formTest" style="width:900px">
            <div class="layui-form-item layui-form-pane">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 65px;">姓名:</label>
                    <div class="layui-input-inline" style="width: 170px;">
                        <input type="text" placeholder="请输入姓名" autocomplete="off"
                               class="layui-input" name="name">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 65px;">性别:</label>
                    <div class="layui-input-inline" style="width: 270px; ">
                        <input type="radio" name="sex" value="" checked title="全部"> &nbsp;
                        <input type="radio" name="sex" value="男" title="男">&nbsp;
                        <input type="radio" name="sex" value="女" title="女">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 65px;">班级:</label>
                    <div class="layui-input-inline" style="width: 130px;">
                        <select name="clazz" id="clazz" lay-verify="required">
                            <option value=""></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-form-pane">
                <div class="layui-inline">
                    <label class="layui-form-label">时间：</label>
                    <div class="layui-input-inline" style="width: 200px;">
                        <input type="text" class="layui-input" id="startTime" autocomplete="off" name="startTime">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 200px;">
                        <input type="text" class="layui-input" id="endTime" autocomplete="off" name="endTime">
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-form-pane">
                <div class="layui-inline">
                    <span class="layui-btn layui-btn-lg" lay-event="sel">查询</span>
                </div>
            </div>
        </div>
        <table id="stu" class="layui-table" lay-filter="test"></table>
        <!--表格上面的条件部分-->
        <script type="text/html" id="toolbarDemo">
            <div class="layui-inline">
                <span class="layui-btn layui-btn-sm" lay-event="add">添加</span>
                <span class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</span>
                <span class="layui-btn layui-btn-sm" lay-event="LAYTABLE_COLS">筛选列</span>
            </div>
        </script>

        <!--表格中行的操作列-->
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>


    </center>
    <script src="Srcipts/jquery-3.4.1.js"></script>
    <script src="layui/layui.all.js"></script>
    <script src="Srcipts/mymethod.js"></script>
    <script>
        layui.use(['jquery', 'layer', 'table', 'form', 'laydate'], function () {
            var $ = layui.$ //JQuery模块
                , layer = layui.layer //弹窗模块
                , table = layui.table //表格模块
                , form = layui.form //表单模块
                , laydate = layui.laydate;//日期
            //日期时间选择器
            laydate.render({
                elem: '#startTime'
                , type: 'datetime'
                , theme: 'grid'
                , trigger: 'click'//呼出事件改成click
                , calendar: true
                //,format: 'yyyy-MM-dd HH:mm:ss' //可任意组合
            });
            //日期时间选择器
            laydate.render({
                elem: '#endTime'
                , type: 'datetime'
                , theme: 'grid'
                , trigger: 'click'//呼出事件改成click
                , calendar: true
                // ,format: 'yyyy-MM-dd HH:mm:ss' //可任意组合
            });
            //加载
            table.render({
                elem: '#stu'
                , height: 'full-400'
                , width: 900
                , title: "学生信息表"
                , url: "WebStudent.asmx/Proc_SelectPage"
                , method: "Post"
                , page: {
                    theme: '#c00', groups: 5, first: '首页',
                    prev: '上一页', next: '下一页', last: '尾页'
                }
                , limit: 5//每页分多少条
                , limits: [5, 10, 15, 20, 25, 30]
                , toolbar: '#toolbarDemo'
                //, toolbar: 'default'
                , defaultToolbar: ['filter', 'print', 'exports']//排序 导出  打印'filter', 'print', 'exports'
                //, totalRow: true//开启合计行
                , cols: [[
                    { type: 'checkbox', align: 'center' }
                    , {
                        field: 'ID', title: '编号', width: 80,
                        sort: true, align: 'center'
                        //, totalRowText: '合计：'
                    }
                    , { field: 'Name', title: '姓名', width: 80, align: 'center' }
                    , { field: 'Sex', title: '性别', width: 80, align: 'center' }
                    , {
                        field: 'Birthday', title: '出生日期', width: 120, align: 'center'
                        //, totalRow: true
                        , templet: function (d) {
                            return convertToDate(d.Birthday);
                        }
                    }
                    , { field: 'Height', title: '身高', width: 80, align: 'center' }
                    , { field: 'CName', title: '班级', width: 112, align: 'center' }
                    , {
                        field: 'Readed', title: '在校状态', sort: true, width: 105, align: 'center'
                        , templet: function (d) {
                            // return d.Readed == true ? "在校" : "离校"
                            if (d.Readed == true) {
                                return '<input type="checkbox" checked name="Readed" lay-skin="switch" lay-filter="switchTest"  disabled lay-text="在校|离校">'
                            } else {
                                return '  <input type="checkbox" name="Readed" lay-skin="switch" disabled lay-text="在校|离校">'
                            }

                        }
                    }
                    , { fixed: 'right', title: '操作', width: 165, align: 'center', toolbar: '#barDemo' }
                ]]
                //回调分页
                //layui数据表格删除最后一行时，页码切换到前一页
                , done: function (res, curr, count) {
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    //console.log(res);
                    //得到当前页码
                    //console.log(curr);
                    //得到数据总量
                    //console.log(count);
                    if (curr > 1 && res.data.length == 0) {
                        var pagevalue = curr - 1;
                        table.reload('stu', {
                            page: { curr: pagevalue }
                        });
                    }
                }
            });
            //查询所有的班级信息
            $.ajax({
                type: "Post",
                url: "WebStudent.asmx/SelectClazz",
                contentType: "application/json",
                dataType: "JSON",
                data: null,
                success: function (r) {
                    var clazz = $("#clazz");
                    $.each(r.d, function (index, item) {
                        $("<option>").val(item.ID).text(item.CName).appendTo(clazz);
                    });
                    form.render();//数据动态加载后必须全部重新渲染
                },
                error: function () {
                    alert("出错了");
                }
            });
            //条件查询
            $('[lay-event="sel"]').click(function () {
                //获取表单区域所有值  的对象
                var formdata = form.val("formTest");
                table.reload('stu', {
                    url: "WebStudent.asmx/Proc_SelectPageWhere"
                    , where: {
                        name: formdata.name
                        , sex: formdata.sex
                        , cid: formdata.clazz
                        , sdate: formdata.startTime
                        , edate: formdata.endTime

                    } //设定异步数据接口的额外参数
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                form.render();
            });
            //监听行工具事件
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'detail') {
                    layer.msg('查看操作');
                } else if (layEvent === 'del') {
                    //layer.close(index);
                    //向服务端发送删除指令
                    //layer.msg('你要删除的id为：' + data.ID);
                    layer.confirm('是否删除数据?', { icon: 3, title: '温馨提示' }, function () {
                        $.ajax({
                            type: "Post",
                            url: "WebStudent.asmx/Delete",
                            contentType: "application/json",
                            dataType: "JSON",
                            data: JSON.stringify({ id: data.ID }),
                            success: function (r) {
                                if (r.d > 0) {
                                    layer.msg('删除成功');
                                    table.reload('stu');//更新表格数据
                                    //obj.del(); //删除对应行（tr）的DOM结构
                                } else {
                                    layer.msg("删除失败！");
                                }
                            },
                            error: function () {
                                layer.msg("出错了");
                            }
                        });
                    });
                } else if (layEvent === 'edit') {
                    //layer.msg('编辑操作');
                    layer.confirm('是否修改数据?', { icon: 3, title: '温馨提示' }, function () {
                        layer.open({
                            type: 2,
                            area: ['550px', '480px'],
                            scrollbar: false, //是否允许浏览器出现滚动条
                            cache: false,
                            skin: 'layui-layer-rim',
                            title: ['学生信息修改', 'font-weight:700'],
                            btn: ["确认修改", "取消"],
                            //getUrlHeader方法是mymethod.js里面的
                            content: [getUrlHeader() + 'WebEdit.html?id=' + data.ID, 'auto'],
                            //success 层弹出后的成功回调方法
                            success: function (layero, index) {

                            },
                            // yes 确定按钮回调方法
                            yes: function (index, layero) {
                                //获取弹出层中的form表单元素
                                var iframeWindow = window['layui-layer-iframe' + index]
                                    //获取表单中的提交按钮
                                    , submit = layer.getChildFrame('form', index).find('[lay-filter="save"]');
                                // , submit = layero.find('iframe').contents().find('[lay-filter="save"]');//两种方式

                                //监听提交
                                iframeWindow.layui.form.on('submit(save)', function (r) {
                                    //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                                    //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                                    //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                                    //return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                                    //提交 Ajax 成功后，静态更新表格中的数据
                                    var field = r.field;
                                    field.ID = data.ID;
                                    if (field.Readed == "on")
                                        field.Readed = true;
                                    else
                                        field.Readed = false;
                                    //console.log(field);
                                    $.ajax({
                                        type: "Post",
                                        url: "WebStudent.asmx/Update",
                                        contentType: "application/json",
                                        dataType: "JSON",
                                        data: JSON.stringify({ stu: field }),
                                        success: function (r) {
                                            if (r.d > 0) {
                                                layer.msg('修改成功');
                                                table.reload('stu'); //数据刷新
                                                layer.close(index); //关闭弹层
                                            }
                                            else layer.msg("修改失败！");
                                        },
                                        error: function () {
                                            layer.msg("出错了");
                                        }
                                    });
                                });
                                // 触发点击事件，会对表单进行验证，验证成功则提交表单，失败则返回错误信息
                                submit.click();
                            },
                            //右上角关闭按钮触发的回调
                            cancel: function (index, layero) {
                                //if (confirm('确定要关闭么')) {
                                //    layer.close(index)
                                //关闭信息框
                                layer.closeAll('dialog');
                                //}
                                //return false;
                            }, btn2: function (index, layero) {
                                //按钮【按钮二】的回调就是取消按钮的
                                //关闭信息框
                                layer.closeAll('dialog');
                                //return false 开启该代码可禁止点击该按钮关闭
                            },
                            //end - 层销毁后触发的回调
                            end: function () {
                                //关闭信息框
                                //layer.closeAll('dialog');
                            }
                        });
                    });
                }
            });
            //监听头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id)
                    , data = checkStatus.data; //获取选中的数据
                switch (obj.event) {
                    case 'add'://添加
                        layer.open({
                            type: 2,
                            area: ['550px', '480px'],
                            scrollbar: false,
                            cache: false,
                            skin: 'layui-layer-rim',
                            title: ['学生信息添加', 'font-weight:700'],
                            btn: ["保存", "取消"],
                            //getUrlHeader方法是mymethod.js里面的
                            content: [getUrlHeader() + 'WebEdit.html', 'auto'],
                            //success 层弹出后的成功回调方法
                            success: function (layero, index) {

                            },
                            // yes 确定按钮回调方法
                            yes: function (index, layero) {
                                //获取弹出层中的form表单元素
                                var iframeWindow = window['layui-layer-iframe' + index]
                                    //获取表单
                                    , formValues = layer.getChildFrame('form', index)
                                    //获取表单中的提交按钮
                                    , submit = formValues.find('[lay-filter="save"]');
                                // , submit = layero.find('iframe').contents().find('[lay-filter="save"]');//两种方式

                                //监听提交
                                iframeWindow.layui.form.on('submit(save)', function (r) {
                                    //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                                    //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                                    //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                                    //return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                                    //提交 Ajax 成功后，静态更新表格中的数据
                                    var field = r.field;
                                    if (field.Readed == "on")
                                        field.Readed = true;
                                    else
                                        field.Readed = false;
                                    $.ajax({
                                        type: "Post",
                                        url: "WebStudent.asmx/InsertStudent",
                                        contentType: "application/json",
                                        dataType: "JSON",
                                        data: JSON.stringify({ stu: field }),
                                        success: function (r) {
                                            if (r.d > 0) {
                                                if (confirm("添加成功,是否继续添加?")) {
                                                    formValues[0].reset();//重置表单
                                                    formValues.find('[value="男"]').prop("checked", true);
                                                    iframeWindow.layui.form.render(); //更新全部
                                                } else {
                                                    layer.close(index); //关闭弹层
                                                }
                                                table.reload('stu'); //数据刷新
                                            }
                                            else layer.msg("修改失败！");
                                        },
                                        error: function () {
                                            layer.msg("出错了");
                                        }
                                    });
                                });
                                // 触发点击事件，会对表单进行验证，验证成功则提交表单，失败则返回错误信息
                                submit.click();
                            },
                            //右上角关闭按钮触发的回调
                            cancel: function (index, layero) {
                                //if (confirm('确定要关闭么')) {
                                //    layer.close(index)
                                //关闭信息框
                                layer.closeAll('dialog');
                                //}
                                //return false;
                            }, btn2: function (index, layero) {
                                //按钮【按钮二】的回调就是取消按钮的
                                //关闭信息框
                                layer.closeAll('dialog');
                                //return false 开启该代码可禁止点击该按钮关闭
                            },
                            //end - 层销毁后触发的回调
                            end: function () {
                                //关闭信息框
                                //layer.closeAll('dialog');
                            }
                        });
                        break;
                    case 'deleteAll'://批量删除
                        //if (data.length === 0) {
                        //    layer.msg('请选择一行');
                        //} else {
                        //    layer.msg('删除');
                        //}
                        layer.confirm('是否删除数据?', { icon: 3, title: '温馨提示' }, function () {
                            var IDS = $.map(data, function (item, index) {
                                return item.ID;
                            }).join(',');//1,2,3,4,56,7
                            console.log(IDS);
                            $.ajax({
                                type: "Post",
                                url: "WebStudent.asmx/Delete",
                                contentType: "application/json",
                                dataType: "JSON",
                                data: JSON.stringify({ id: IDS }),
                                success: function (r) {
                                    if (r.d > 0) {
                                        layer.msg('删除成功');
                                        table.reload('stu');
                                        //obj.del(); //删除对应行（tr）的DOM结构
                                    } else {
                                        layer.msg("删除失败！");
                                    }
                                },
                                error: function () {
                                    layer.msg("出错了");
                                }
                            });
                        });
                        break;
                };
            });


        });

    </script>
</body>
</html>


